// 获取内容：
// 1.音频信息
// 2.歌词信息
// 3.歌曲专辑图片信息
// ？两个有关联的数据如何确保一致性
// ？多个数据的请求对服务器造成的压力问题
// 高并发请求
// 歌词接口:http://localhost:3000/lyric?id=1868206865
// 音频接口：http://localhost:3000/song/url?id=1868206865
// 歌曲详情:http://localhost:3000/song/detail?ids=id=1868206865
// 同时并发
// 获取页面元素


let album_img = document.querySelector(".album_img>img")
let bg_img = document.querySelector(".bg>img")
let myaudio = document.querySelector("#myaudio")

let song_name = document.querySelector(".lyric>h3")
let lyric_info = document.querySelector(".lyric>p")
let disk = document.querySelector(".disk")
let slider = document.querySelector(".slider>input")
// slider.value   range当前进度
// myaudio.currentTime  歌曲当前时间
// myaudio.duration 歌曲总时间
// 接收首页传递过来的id参数
let songID = location.search.slice(4)
// 获取歌词
function getLyric() {
    return axios.get(`http://localhost:3000/lyric?id=${songID}`);
}
// 获取音频
function getSong() {
    return axios.get(`http://localhost:3000/song/url?id=${songID}`);
}
// 获取歌曲详情
function getSongDetail() {
    return axios.get(`http://localhost:3000/song/detail?ids=${songID}`);
}
// 获取歌曲评论
function getComments() {
    // 获取评论数据
    return axios.get("http://localhost:3003/comments")
}
function get_info() {
    axios.all([getLyric(), getSong(), getSongDetail(), getComments()])
        .then(axios.spread(function (lyricData, songData, detailData, commentsData) {
            console.log("歌词信息", lyricData);
            console.log("音频信息", songData);
            console.log("歌曲详情信息", detailData);
            console.log("歌曲评论信息", commentsData.data);
            // 歌词信息：lyricData.data.lrc.lyric 
            // 歌曲标题：detailData.data.songs[0].name
            // 替换背景和专辑图片
            // 专辑图片： detailData.data.song[0].al.picUrl

            // 音频信息: songData.data.data[0].url
            // 渲染评论内容
            let commentstr = ``
            commentsData.data.forEach(value => {
                commentstr += `
            <li>
            <div class="com_header">
                <div>
                    <p>${value.name}</p>
                    <p>${value.time}</p>
                </div>
                <div>
                    <span class="fa fa-thumbs-o-up"></span>
                    <span>${value.agree}</span>
                </div>
            </div>
            <div class="com_content">
                <p>
                    ${value.comments}
                </p>
            </div>
            </li>
            `
            })
            _getE(".comments_list").innerHTML = commentstr
            // 设置专辑头像图片和背景图片 语法：element.setAttribute
            album_img.setAttribute("src", detailData.data.songs[0].al.picUrl)
            bg_img.setAttribute("src", detailData.data.songs[0].al.picUrl)

            // 插入歌词标题和歌词信息
            song_name.innerHTML = detailData.data.songs[0].name
            // lyric_info.innerHTML = lyricData.data.lrc.lyric
            // 第一步：实现音频的播放和暂停
            // 第二步：实现唱碟的旋转和暂停
            myaudio.setAttribute("src", songData.data.data[0].url)
            disk.addEventListener("click", play)
            // 初始化lyric对象
            var lyric = new window.Lyric(lyricData.data.lrc.lyric, function (obj) {
                // obj包括两个内容，一个是行数，一个是对应行数的歌词信息
                lyric_info.innerHTML = obj.txt
            })
            // 函数式编程
            function play() {
                // paused 表示暂停的状态
                if (myaudio.paused) {
                    myaudio.play()
                    disk.classList.toggle("play_state")
                    lyric.togglePlay()


                }
                else {
                    myaudio.pause()
                    disk.classList.toggle("play_state")
                    lyric.togglePlay()
                }
            }
            sliderDrag()
            // 拖动滑块，歌曲快进快退功能
            function sliderDrag() {
                // slider.addEventListener("")
                slider.oninput = function () {
                    // 滑块滑动的时候执行某事件
                    myaudio.currentTime = slider.value * myaudio.duration / 100
                    console.log(myaudio.currentTime);
                    // 歌词前进 currentTime单位是秒
                    lyric.seek(myaudio.currentTime * 1000)
                    // 歌曲播放
                    myaudio.play()
                    // 唱碟旋转
                    disk.classList.add("play_state")
                }
            }
            sliderMove()
            function sliderMove() {
                myaudio.ontimeupdate = function () {
                    slider.value = 100 * myaudio.currentTime / myaudio.duration
                }
            }
            // 确保歌曲已经加载，我们才能使用sliderMove和sliderDrag
            myaudio.onloadedmetadata = function () {
                sliderDrag()
                sliderMove()
            }
        }))

}
get_info()






